<template>
  <view class="content">
    <view id="allTop">
      <!-- #ifndef MP-TOUTIAO -->
      <singleHeader pageTitle="新人礼"></singleHeader>
      <!-- #endif -->

      <view
        class="hdBg"
        :style="[
          { paddingTop: 'calc(' + statusBarHeight + 'px + 88rpx)' },
          getStyle(conf.head || null),
        ]"
      >
        <image
          class="imgBg"
          v-if="conf.head && conf.head.bg_img"
          :src="conf.head.bg_img"
          mode="aspectFill"
        ></image>
      </view>

      <view
        class="contentHd"
        :style="[
          { marginTop: 'calc(' + statusBarHeight + 'px + 88rpx)' },
          getStyle(conf.body || null),
        ]"
      >
        <image
          class="imgBg"
          v-if="conf.body && conf.body.bg_img"
          :src="conf.body.bg_img"
          mode="aspectFill"
        ></image>

        <newUser
          v-if="goodsList.length"
          :items="goodsList"
          @add="addCart"
        ></newUser>
        <newUserCoupon
          v-if="couponList.length"
          :couponList="couponList"
          @use="use"
        ></newUserCoupon>
      </view>
    </view>

    <goodsList
      :tab="tab"
      :active="active"
      :items="goods"
      :newGoods="goods_ids"
      @handel="handel"
      @add="addCart"
    ></goodsList>
    <view class="footerBox">
      <goodsAddCart
        :good="goodsOfAdd"
        @callBack="handel('addCart')"
      ></goodsAddCart>
    </view>

    <footerCart ref="footer"></footerCart>
  </view>
</template>

<script>
import singleHeader from "@/components/diySystemPage/components/singleHeader/index.vue";
import newUser from "./components/newUser";
import newUserCoupon from "./components/newUserCoupon";
import goodsList from "../components/goodsList";
import footerCart from "../components/footerCart";
import goodsAddCart from "@/components/diyNew/goodsAddCart/index.vue";

import {
  newUserConf,
  newUserPushGoods,
  newUser as info,
} from "@/api/marketing/newUser";

export default {
  components: {
    singleHeader,
    newUser,
    newUserCoupon,
    goodsList,
    goodsAddCart,
    footerCart,
  },

  computed: {
    getStyle() {
      return (conf) => {
        if (!conf) return {};

        return {
          background: conf.bg_color,
        };
      };
    },
  },

  data() {
    return {
      conf: {
        head: null,
        body: null,
      },
      couponList: [],
      goodsList: [],
      goods_ids: "",
      goods: [],
      active: "",
      tab: [],
      goodsOfAdd: {}, // 添加到购物车的商品

      isEnd: false,
      limit: 10,
      page: 1,

      item: null,
      top: 0,
      id: "",

      goods_ext: [],
    };
  },

  async onLoad() {
    const confRes = await newUserConf();
    if (!confRes.code) {
      this.conf = confRes.data.conf;
    }

    const infoRes = await info();
    if (!infoRes.code) {
      this.couponList = infoRes.coupon_list || [];
      this.goods_ext = infoRes.goods_ext;

      this.id = infoRes.data.id;
      if (infoRes.data.goods_ids) {
        this.goods_ids = infoRes.data.goods_ids;
        this.getGoodsList(1, { goods_id: infoRes.data.goods_ids });
      }
    }

    const goodsRes = await newUserPushGoods();
    if (!goodsRes.code) {
      this.tab = goodsRes.data.conf || [];

      if (this.tab.length) {
        this.item = this.tab[0];
        this.handel("tab", this.tab[0]);
      }
    }
  },

  methods: {
    init() {
      if (this.top) return;
      this.$nextTick(() => {
        let query;
        // #ifdef MP-ALIPAY
        query = uni.createSelectorQuery();
        // #endif
        // #ifndef MP-ALIPAY
        query = uni.createSelectorQuery().in(this);
        // #endif

        query
          .select("#allTop")
          .boundingClientRect((data) => {
            this.top = data.height;
          })
          .exec();
      });
    },
    use() {
      uni.pageScrollTo({
        scrollTop: this.top - this.statusBarHeight - 44,
      });
    },
    clear() {
      this.isEnd = false;
      this.page = 1;
      this.goods = [];

      this.getGoodsList();
    },
    handel(type, item) {
      switch (type) {
        case "tab":
          if (this.active !== item.tab) {
            this.active = item.tab;
            this.item = item;
            this.clear();
          }
          break;

        case "addCart":
          this.$nextTick(() => {
            this.$refs.footer.init();
          });
          break;
      }
    },

    addCart(item) {
      let goods = Object.assign({}, item);
      this.goodsOfAdd = { ...goods };//, activity_new_user_id: this.id
      setTimeout(() => {
        this.goodsOfAdd = {};
      }, 1);
    },

    async getGoodsList(type = 0, params = null) {
      let { limit, page, item } = this;
      if (!type) {
        params = {
          limit,
          page,
        };
        if (item.cat_ids) {
          params.cat_id = item.cat_ids;
        } else {
          params.goods_id = item.goods_ids.join(",");
        }
      }

      let res = await this.$allrequest.diy.getGoodsList(params, true);
      uni.stopPullDownRefresh();
      if (!res.code) {
        if (!type) {
          let { goods: oldList } = this,
            { row_count, list } = res.data;

          if (list.length) {
            oldList.push(...list);
            this.page = this.page + 1;
          }

          if (oldList.length >= parseInt(row_count)) {
            this.isEnd = true;
          }
        } else {
          let goodsList = res.data.list || [],
            { goods_ext } = this;

          goodsList.forEach((el) => {
            let item = goods_ext.find((e) => e.goods_id === parseInt(el.id));
            if (item) {
              el.price = item.price;
            }
          });

          this.goodsList = goodsList;
        }
      }

      this.init();
    },
  },

  onReachBottom() {
    if (this.isEnd) {
      return;
    }

    this.getGoodsList();
  },

  onPullDownRefresh() {
    this.clear();
  },
};
</script>

<style lang="less" scoped>
.content {
  position: relative;
  min-height: 100vh;
  background: #f0f0f0;
}

.contentHd {
  position: relative;
  padding: 20rpx 0;

}

.hdBg {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  width: 100%;
  z-index: 3;
}

::v-deep {
  .page-header-box {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 9;
  }

  .page-header {
    background: transparent !important;
  }

  .icon-fanhui,
  .header-content {
    color: #fff !important;
  }
}

.imgBg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.footerBox {
  padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
}
</style>
